<template>
  <div class="container">
    <div class="app-container">
      <div class="radioBox">
        <el-radio-group v-model="flag" size="medium">
          <el-radio-button :label="true"> 历史库存记录 </el-radio-button>
          <el-radio-button :label="false"> 库存余量预警 </el-radio-button>
        </el-radio-group>
      </div>
      <div class="contentBox">
        <historical-inventory v-if="flag" />
        <inventory-balance v-else />
      </div>
    </div>
  </div>
</template>
<script>
import historicalInventory from './components/historicalInventory.vue'
import InventoryBalance from './components/inventoryBalance.vue'
export default {
  components: { historicalInventory, InventoryBalance },
  data() {
    return {
      flag: true
    }
  },

  methods: {}
}
</script>
<style lang="scss">
@import '~@/styles/_handle.scss';

.is-active {
  .el-radio-button__inner {
    @include background('radio_bg_active');
  }
}
.el-radio-button__inner {
  @include background('radio_bg');
}
.contentBox {
  @include background('content_bg_color');
}
</style>
<style scoped lang="scss">
::v-deep .radioBox {
  text-align: center;
  .el-radio-button:first-child {
    .el-radio-button__inner {
      border: none;
      margin-right: -16px;
    }
  }
  .is-active {
    .el-radio-button__inner {
      border: none;
      box-shadow: none;
    }
  }
  .el-radio-button__inner {
    width: 188px;
    height: 54px;
    border: none;
    line-height: 36px;
    font-size: 20px;
    box-shadow: none;
    color: rgba($color: #fff, $alpha: 0.8);
  }
}
.container {
  height: 100%;
  padding: 24px 30px;
}
.app-container {
  width: 100%;
  height: 100%;
  padding: 0;
  .contentBox{
    height: calc(100% - 56px);
  }
}
::v-deep .contentBox {
  width: 100%;
  padding: 32px 20px 0;
  margin: 0 auto;
  border-radius: 10px;
}
</style>
